<template>
  <div class="map-manage">
    <div class="map-manage-folder">
      <map-folder
        v-bind:maps="maps"
        v-on:on-change="mapFolderChangeHandler"></map-folder>      
    </div>

    <div class="map-manage-map">
      <map-editor ref="mapEditor"
        v-bind:map-folder="maps"
        v-bind:map="mapData"
        v-bind:selected-id="selectedId"
        v-bind:selected-tiles = "selectedObj"
        v-on:on-change="mapDetailChangeHandler"></map-editor>
    </div>
    <div class="map-manage-detail">
      <map-others
        v-bind:map="mapData"
        v-bind:selected-item="selectedItem"     
        v-on:on-change="mapDetailChangeHandler"
        v-on:on-selected="selectedHandler"></map-others>
    </div>
    
    <Spin fix v-if="isLoading"></Spin>
  </div>
</template>

<script src="./mapManage.js"></script>

<style lang="stylus">
@import './mapManage.styl'
</style>
